<template>
    <div class="affix-container">
        <Example title="顶部固定">
            <a-affix :offset-top="200">
                <a-button>Affix Top</a-button>
            </a-affix>
        </Example>
        <Example  title="滚动容器">
            <div ref="target" style="height: 200px;overflow: auto;">
                <div style="height: 500px; background-color: rgb(255 226 226);padding-top: 60px;">
                    <a-affix :target="() => this.$refs.target">
                        <a-button>Affix Top by Target</a-button>
                    </a-affix>
                </div>
            </div>
        </Example>
        <Example title="底部固定">
            <a-affix :offset-bottom="100">
                <a-button>Affix Bottom</a-button>
            </a-affix>
        </Example>
    </div>
</template>

<script>
export default {

};
</script>

<style lang="less" scoped>
.affix-container {
    height: 1000px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
</style>
